<script setup lang="ts">
import { ref } from "vue";
import {
  getSysDictionaryByType,
  queryOverlapPoints,
  querySinglePoints,
  querySuspensionLines,
} from "@/api/pipe";
import Circle from "@/views/pipe-network/plugins/circle";
import createCircle from "@turf/circle";
import Rectangle from "@/views/pipe-network/plugins/rectangle";
import Polygon from "@/views/pipe-network/plugins/polygon";
import { useMap } from "@/views/pipe-network/components/Map/index.vue";
import { changeDateFormat } from "@/utils";

const props = defineProps({
  setAreaTypeId: {
    type: Function,
    default: () => 0,
  },
});
const isShowStaticResult = ref(false);
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const areaType = ref(0);
const methodType = ref(0);
const typeOptions = ref<Array<{ value: number; label: string }>>([]);
const jsonPolygon = ref("");
const drawManager = ref();
const map = useMap();

getSysDictionaryByType({
  pageSize: 1000,
  pageIndex: 1,
  dicTypeId: 1,
}).then(({ data, succeeded }: any) => {
  if (succeeded) {
    typeOptions.value = data.items.map((item: any) => {
      const { dictName, dictId } = item;
      return {
        value: dictId,
        label: dictName,
      };
    });
  }
});
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getData();
};
const getData = () => {
  const api = [
    querySinglePoints,
    queryOverlapPoints,
    querySuspensionLines,
    null,
  ][methodType.value];
  api && queryPointList(api);
};
const queryPointList = (api: Function) => {
  const params = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    jsonPolygon: jsonPolygon.value,
  };
  api(params).then(({ data, succeeded }: any) => {
    if (succeeded) {
      tableData.value = data.items.map((item: any, index: number) => ({
        ...item,
        index: index + 1,
        coordinates: JSON.parse(item.jsonGeom).coordinates,
      }));
      total.value = data.totalCount;
    }
  });
};
const onFullScreen = () => {
  const el: HTMLElement | null = document.querySelector(".staticResult");
  if (el) {
    const { height } = el.style;
    if (height === "" || height === "300px") {
      el.style.height = "calc(100vh -  125px)";
      pageSize.value = 15;
    } else {
      el.style.height = "300px";
      pageSize.value = 5;
    }
    getData();
  }
};
const startStatic = () => {
  getData();
  isShowStaticResult.value = true;
};
const reset = () => {
  isShowStaticResult.value = false;
  tableData.value = [];
  currentPage.value = 1;
  total.value = 0;
  areaType.value = 0;
  methodType.value = 0;
  typeOptions.value = [];
  jsonPolygon.value = "";
  drawManager.value?.clear();
};
const draw = (type: number) => {
  drawManager.value?.clear();
  switch (type) {
    case 3:
      const circle = new Circle(map);
      circle.startDraw({
        callback: (rst: any) => {
          const { lat, lng, radius } = rst;
          const options: any = { steps: 64, units: "kilometers" };
          const circle = createCircle(
            [lng, lat],
            Number(radius) / 1000,
            options
          );
          jsonPolygon.value = JSON.stringify(circle.geometry.coordinates[0]);
        },
        mouseMoveCallback: null,
      });
      drawManager.value = circle;
      break;
    case 2:
      const rect = new Rectangle(map);
      rect.startDraw({
        callback: (rst: any) => {
          const latlngs = rst.rectangle.getLatLngs();
          const points = latlngs[0].map((item: any) => [item.lng, item.lat]);
          jsonPolygon.value = JSON.stringify(points.concat([points[0]]));
        },
        mouseMoveCallback: null,
      });
      drawManager.value = rect;
      break;
    case 1:
      const polygon = new Polygon(map);
      polygon.startDraw({
        callback: (rst: any) => {
          const { points } = rst;
          let pts = points.concat([points[0]]);
          pts = pts.map((item: Array<number>) => [item[1], item[0]]);
          jsonPolygon.value = JSON.stringify(pts);
        },
        mouseMoveCallback: null,
      });
      drawManager.value = polygon;
      break;
  }
};
const getField = (data: any, field: string) => {
  const { lineAttribute } = data;
  if (Array.isArray(lineAttribute)) {
    const obj = lineAttribute.find((item: any) => item.attr === field);
    if (obj) {
      return obj.value;
    }
  }
  return "";
};
onMounted(() => getData());
onUnmounted(() => drawManager.value?.clear());
</script>

<template>
  <div class="singlePointCheck">
    <div class="header">孤点检测</div>
    <div class="area">
      <div class="oneLevel">选择区域</div>
      <div class="tips">在地图上绘制区域范围</div>
      <div class="areaOptions">
        <div :class="{ active: areaType == 0 }" @click="areaType = 0">
          <span>全部</span>
        </div>
        <div
          :class="{ active: areaType == 1 }"
          @click="
            areaType = 1;
            draw(1);
          "
        >
          <span>多边形</span>
        </div>
        <div
          :class="{ active: areaType == 2 }"
          @click="
            areaType = 2;
            draw(2);
          "
        >
          <span>矩形</span>
        </div>
        <div
          :class="{ active: areaType == 3 }"
          @click="
            areaType = 3;
            draw(3);
          "
        >
          <span>圆形</span>
        </div>
      </div>
    </div>
    <div class="checkItem">
      <span class="oneLevel">选择检查项</span>
      <div class="items">
        <div :class="{ active: methodType == 0 }" @click="methodType = 0">
          孤立点
        </div>
        <div :class="{ active: methodType == 1 }" @click="methodType = 1">
          重叠点
        </div>
        <div :class="{ active: methodType == 2 }" @click="methodType = 2">
          悬挂线
        </div>
        <div :class="{ active: methodType == 3 }" @click="methodType = 3">
          重叠线
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="startStatic">统计</el-button>
    </div>
  </div>
  <div class="staticResult" v-if="isShowStaticResult">
    <div class="title">
      检测结果
      <el-icon class="fullScreen" @click="onFullScreen"><FullScreen /></el-icon>
      <el-icon class="close" @click="isShowStaticResult = false"
        ><CircleClose
      /></el-icon>
    </div>
    <!--管点 -->
    <el-table
      v-if="methodType < 2"
      :data="tableData"
      style="flex: 1; width: 100%"
    >
      <el-table-column label="序号" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.index }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="methodType < 2 ? '管点名称' : '管段名称'"
        width="10%"
      >
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              methodType < 2 ? scope.row.pointName : scope.row.lineName
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="methodType < 2 ? '管点GIS编号' : '管段GIS编号'"
        width="10%"
      >
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              methodType < 2 ? scope.row.pointGisNo : scope.row.lineGisNo
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="methodType < 2 ? '管点类型' : '管段类型'"
        width="10%"
      >
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.className }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="坐标位置" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label" :title="scope.row.coordinates">{{
              scope.row.coordinates
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="详细地址" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label" :title="scope.row.address">{{
              scope.row.address
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="埋深(米)" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.depth }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="投运时间" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              changeDateFormat(scope.row.workStartDate)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              changeDateFormat(scope.row.createTime)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.remark }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--管段 -->
    <el-table
      v-if="methodType >= 2"
      :data="tableData"
      style="flex: 1; width: 100%"
    >
      <el-table-column label="序号" width="6%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.index }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="methodType < 2 ? '管点类型' : '管段类型'"
        width="10%"
      >
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.className }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="methodType < 2 ? '管点名称' : '管段名称'"
        width="10%"
      >
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              methodType < 2 ? scope.row.pointName : scope.row.lineName
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="起点名称" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.startPointName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="终点名称" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.endPointName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="平均埋深(米)" width="7%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.depth }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="管段长度(米)" width="7%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.length }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="管径" width="6%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ getField(scope.row, "管径") }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="口径" width="6%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ getField(scope.row, "口径") }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="管材" width="6%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ getField(scope.row, "管材") }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="投运时间" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              changeDateFormat(scope.row.workStartDate)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              changeDateFormat(scope.row.createTime)
            }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination
        :small="true"
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :pager-count="5"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.singlePointCheck {
  position: absolute;
  top: 110px;
  right: 10px;
  z-index: 1000;
  width: 211px;
  height: 735px;
  font-family: PingFangSC-bold, sans-serif;
  color: #000;
  background-color: rgb(255 255 255 / 100%);
  border: 1px solid rgb(187 187 187);

  .header {
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background: #1990ff;
  }

  .area {
    span {
      display: inline-block;
      width: 80px;
      height: 45px;
      font-size: 14px;
      line-height: 45px;
      text-align: center;
    }

    .areaOptions {
      display: grid;
      grid-template-rows: 50% 50%;
      grid-template-columns: 50% 50%;
      place-items: center center;
      cursor: pointer;

      div {
        border-radius: 10px;
      }
    }

    .active {
      color: #fff;
      background: #1990ff;
      background-image: url("../../../../../assets/images/checked.png");
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: 20px 20px;
    }
  }

  .oneLevel {
    display: inline-block;
    margin: 15px 0 10px 10px;
    font-size: 16px !important;
    font-weight: bold;
  }

  .tips {
    position: relative;
    top: -15px;
    left: -2px;
    margin: 10px 0 -5px 10px;
    font-size: 12px;
    color: red;
  }

  .checkItem {
    span {
      display: inline-block;
      margin: 15px 0 10px 10px;
      font-size: 14px;
      font-weight: bold;
    }

    .items {
      display: grid;
      grid-template-rows: 50% 50%;
      grid-template-columns: 50% 50%;
      place-items: center center;
      cursor: pointer;

      div {
        width: 80px;
        height: 45px;
        line-height: 45px;
        text-align: center;
      }
    }

    .active {
      color: #fff;
      background: #1990ff;
      background-image: url("../../../../../assets/images/checked.png");
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: 20px 20px;
      border-radius: 10px;
    }
  }

  .footer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: auto;
    margin-top: 60px;
  }
}

.staticResult {
  position: absolute;
  bottom: 14px;
  left: 12px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 522px);
  height: 300px;
  color: #000;
  background-color: rgb(255 255 255 / 100%);
  border: 1px solid rgb(187 187 187);

  :deep(.el-table__header) {
    width: 100% !important;
  }

  :deep(.el-table__body) {
    width: 100% !important;
  }

  :deep(.el-table__cell) {
    height: 40px !important;
  }

  .title {
    height: 30px;
    padding: 5px 10px;
    color: #fff;
    background: #1990ff;

    .fullScreen {
      position: relative;
      top: 3px;
      right: 45px;
      float: right;
      cursor: pointer;
    }

    .close {
      position: relative;
      top: 3px;
      float: right;
      cursor: pointer;
    }
  }

  .pager {
    position: relative;
    top: 5px;
    height: 30px;
    padding: 0 30px;

    :deep(.el-pagination) {
      float: right;
    }
  }
}
</style>
